<template>
	<view class="container">
		<view v-for="(item,key) in list" :key="item.dotClass+'_'+key">
			<view class="dot-box" :class="item.dotClass" @click="handleShow(item)" v-if="!item.isHide">
				<image :src="item.dotImg" class="dot-img"></image>
				<view class="dot-title" :data-title="item.name">
				</view>
			</view>
			<view class="project-content" :class="item.projectClass" v-if="item.show">
				<image :src="item.projectImg" class="project-img" :class="item.animationClass"></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: '1',
					dotImg: '../../static/dot.png',
					dotClass: 'ptygf',
					show: false,
					projectImg: '../../static/ptygf.png',
					projectClass: 'ptygf',
					animationClass:'ptygf',
					name: '向阳居'
				}, {
					id: '2',
					dotImg: '../../static/dot.png',
					dotClass: 'gfcl',
					show: false,
					projectImg: '../../static/gfcl.png',
					projectClass: 'gfcl',
					animationClass:'gfcl',
					name: '绿能长廊'
				}, {
					id: '3',
					dotImg: '../../static/dot.png',
					dotClass: 'gfcp',
					show: false,
					projectImg: '../../static/gfcp.png',
					projectClass: 'gfcp',
					animationClass:'gfcp',
					name: '绿能泊苑'
				}, {
					id: '4',
					dotImg: '../../static/dot.png',
					dotClass: 'gfggwd',
					show: false,
					projectImg: '../../static/gfggwd.png',
					projectClass: 'gfggwd',
					animationClass:'gfggwd',
					name: '绿电区'
				}, {
					id: '5',
					dotImg: '../../static/dot.png',
					dotClass: 'cjg_spxwm',
					show: false,
					projectImg: '../../static/cjg_spxwm.png',
					projectClass: 'cjg_spxwm',
					animationClass:'cjg_spxwm',
					name: '储金阁',
					isHide: true,
				}, {
					id: '6',
					dotImg: '../../static/dot.png',
					dotClass: 'gfxyj',
					show: false,
					projectImg: '../../static/gfxyj.png',
					projectClass: 'gfxyj',
					animationClass:'gfxyj',
					name: '国风向阳居'
				}, {
					id: '7',
					dotImg: '../../static/dot.png',
					dotClass: 'bxt_tys',
					show: false,
					projectImg: '../../static/bxt_tys.png',
					projectClass: 'bxt_tys',
					animationClass:'bxt_tys',
					name: '步闲亭'
				}, {
					id: '8',
					dotImg: '../../static/dot.png',
					dotClass: 'gflqc',
					show: false,
					projectImg: '../../static/gflqc.png',
					projectClass: 'gflqc',
					animationClass:'gflqc',
					name: '光伏篮球场'
				}, {
					id: '9',
					dotImg: '../../static/dot.png',
					dotClass: 'jdf_zls',
					show: false,
					projectImg: '../../static/jdf_zls.png',
					projectClass: 'jdf_zls',
					animationClass:'jdf_zls',
					name: '金顶房'
				}, {
					id: '10',
					dotImg: '../../static/dot.png',
					dotClass: 'zpszgfxyj',
					show: false,
					projectImg: '../../static/zpszgfxyj.png',
					projectClass: 'zpszgfxyj',
					animationClass:'zpszgfxyj',
					name: '装配式\n中国风向阳居'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			handleShow(item) {
				const arr = this.list.map(e => {
					return {
						...e,
						show: e.id == item.id ? true : false
					}
				})
				this.list = arr
			}
		}
	}
</script>

<style lang="less">
	// 分辨率3840*2160
	.container {
		width: 100%;
		// height: 100%;
		aspect-ratio: 16 / 9;
		background-image: url('../../static/bg.jpg');
		background-size: contain;
		background-repeat: no-repeat;
		position: relative;
	}


	.dot {

		&-box {
			position: absolute;
			// height: 128rpx;
			// width: 128rpx;
			width: 2vw;
			height: 2vw;

			&.ptygf {
				left: 16%;
				top: 30%;
			}

			&.zpszgfxyj {
				left: 29%;
				top: 30%;
			}

			&.gfcl {
				right: 12%;
				top: 60%;
			}

			&.gfcp {
				right: 15%;
				top: 46%;
			}

			&.gfggwd {
				right: 36%;
				bottom: 15%;
			}

			&.cjg_spxwm {
				left: 33%;
				top: 28%;
			}

			&.gfxyj {
				left: 45%;
				top: 35%;
			}

			&.gflqc {
				right: 25%;
				top: 46%;
			}

			&.bxt_tys {
				right: 36%;
				top: 35%;
			}

			&.jdf_zls {
				left: 40%;
				top: 50%;
			}
		}

		&-img {
			height: 100%;
			width: 100%;
		}

		&-title {
			margin-top: -12rpx;
			line-height: 36rpx;
			&::before {
				content: attr(data-title);
				color: #fff;
				display: inline-block;
				width: 6vw;
				margin-left: -2vw;
				line-height: 36rpx;
				text-align: center;
				white-space: pre;
			}
		}
	}

	.project-content {
		position: absolute;
		// width: 1016rpx;
		// height: 882rpx;
		// width: 13.229166666666666666666666666667vw; // 原始尺寸
		// height: 11.484375vw;// 原始尺寸
		// width: 6.614583333333335vw; // 缩小50%
		// height: 5.7421875vw;// 缩小50%
		width: 19.843750000000005vw; // 放大50%
		height: 17.2265625vw; // 放大50%
		z-index: 1;

		&.ptygf {
			//原始尺寸
			// right: 22.2%;
			// top: 30%;
			// 缩小50%
			// left: 17%;
			// top: 21.6%;
			// 放大50%
			// left: 16.4%;
			// top: 2.2%;
			left: -2.3%;
			top: 30.6%;
		}

		&.zpszgfxyj {
			// left: 30%;
			// top: 21.5%;
			left: 29.4%;
			top: 2.2%;
		}

		&.gfcl {
			// right: 0%;
			// top: 42%;
			// right: 6.4%;
			// top: 51.5%;
			// right: -6.2%;
			// top: 32.3%;
			right: 12.4%;
			    top: 32.3%;
		}

		&.gfcp {
			// right: 3%;
			// top: 28%;
			// right: 9.3%;
			// top: 37.6%;
			// right: -3.22%;
			// top: 18.2%;
			    right: 15.38%;
			    top: 18.2%;
		}

		&.gfggwd {
			// right: 24.2%;
			// bottom: 16%;
			// right: 30.2%;
			// bottom: 17%;
			right: 17.77%;
			bottom: 15.7%;
		}

		&.cjg_spxwm {
			// left: 33.6%;
			// top: 10%;
			left: 34%;
			top: 19.7%;
		}

		&.gfxyj {
			// left: 45.6%;
			// top: 17%;
			// left: 46%;
			// top: 26.5%;
			left: 45.45%;
			top: 7.15%;
		}

		&.gflqc {
			// right: 19.5%;
			// top: 37.7%;
			right: 6.8%;
			top: 18.2%;
		}

		&.bxt_tys {
			// right: 30.3%;
			// top: 26.5%;
			right: 17.77%;
			top: 7.18%;
		}

		&.jdf_zls {
			// left: 41.2%;
			// top: 41.4%;
			// left: 40.35%;
			// top: 22.2%;
			left: 21.7%;
			top: 50.8%;
		}

		.project-img {
			width: 100%;
			height: 100%;
			opacity: 0;
			transform: scale(0);
			animation: scaleStyle 0.5s ease forwards;
			transform-origin: left bottom;
			&.ptygf,&.jdf_zls{
				transform-origin: right top;
			}
			&.gfcp,&.gfcl{
				transform-origin: right bottom;
			}
		}
	}

	@keyframes scaleStyle {
		0% {
			opacity: 0;
			transform: scale(0.1);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>